<template>
  <div class="logistics">
   
    <div class="header_list" v-for="(item,header_id) in header_list" :key="header_id">
      <image :src="item.img"/>
      <div class="header_r">
        <div class="state">{{item.state}}</div>
        <div class="express">{{item.express}}:{{item.order_num}}</div>
        <div class="tel">官方电话:<span>{{item.tel}}</span></div>
      </div>
    </div>
    <div class="express_info">
      <div class="express_l">
        <image src="/static/images/shunfeng.png"/>
        <div class="express_c">
            <div class="express_c_t">派送员</div>
            <div class="express_c_b">杭州城西分部</div> 
        </div> 
      </div>
      <image class="express_r" src="/static/images/dianhua.png"/>
    </div>
    <div class="content">
        <div class="logistics_list" v-for="(item,index) in logistics_list" :key="index">
                <div class="list_time" :style="index==1 && item.state=='已签收'?'color:#333;margin-bottom:30rpx':''" v-if="index==0?false:true">
                    <div class="list_time_t">{{item.date}}</div>
                    <div class="list_time_b">{{item.time}}</div>
                </div>
                <div class="box">
                    <div class="list_c">
                        <image src="/static/images/signing.png" v-if="item.state ?true:false"/>
                        <image src="/static/images/dizhi.png" v-if="item.last_address && index==0?true:false"/>
                        <div class="circal" v-if="item.state || index==0?false:true"></div>
                        <div class="lang" v-if="index==logistics_list.length-1 || index==0?false:true"></div>
                    </div>
                    <div class="list_r">
                      <div class="state" :style="index==1 && item.state=='已签收'?'color:#333':''" v-if="item.state?true:false">{{item.state}}</div>
                      <div class="address" :style="index==1 && item.state=='已签收'?'color:#333':''">{{item.address}}{{item.people}}<span>{{item.tel}}</span>{{item.rex}}</div>
                      <div class="address" :style="item.last_address && index==0?'color:#FF3D4FFF':''" v-if="item.last_address?true:false">{{item.last_address}}</div>
                    </div>
                </div>           
        </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      last_id:'',
      header_list:[
        {img:'/static/images/img.png',state:'已签收',order_num:'3800066036130',tel:'95538',express:'顺丰快递'}
      ],
      logistics_list:[
        {date:'04-06',time:'00:12',address:'您的订单开始处理'},
        {date:'04-06',time:'00:12',address:'您的订单信息审核通过'},
        {date:'04-06',time:'00:12',address:'您的订单已通知配货'},
        {date:'04-06',time:'00:12',address:'您的订单待配货'},
        {date:'04-07',time:'00:12',address:'您的订单已打物流单'},
        {date:'04-07',time:'00:12',address:'您的订单已打发货单'},
        {date:'04-07',time:'00:12',address:'您的包裹已打包',state:'已下单'},
        {date:'04-07',time:'10:12',address:'您的包裹已出库',state:'已出库'},
        {date:'04-07',time:'10:12',address:'卖家发货',state:'已发货'},
        {date:'04-07',time:'10:12',address:'浙江省金华市荷叶公司 已收件',state:'已揽件'},
        {date:'04-08',time:'00:12',address:'浙江省杭州市丁桥 已收入'},
        {date:'04-08',time:'10:12',address:'浙江省杭州市丁桥 已收入',state:'运输中'},
        {date:'04-08',time:'10:32',address:'【杭州市】浙江省杭州市丁桥',state:'派送中',people:'派件员：崔亚齐',tel:'18069842790',rex:'正在为您派件'},
        {date:'04-08',time:'11:32',address:'浙江省杭州市丁桥公司 已签收 签收人：门卫',state:'已签收'},
        {last_address:'【收货地址】浙江省杭州市江干区 丁晓镇 蔚蓝领秀6-3-1001'},
      ]
    }
  },
  methods: {
 
  },
  created () {
    // let app = getApp()
  },
  onLoad(){
    this.logistics_list.reverse()
  }
}
</script>

<style scoped lang="less">
  .logistics{
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    .header_list{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-top: 2rpx solid #e6e6e6;
      height: 202rpx;
      padding: 32rpx 0rpx 20rpx 30rpx;
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 20rpx;  
      image{
        width: 150rpx;
        height: 150rpx;
        margin-right: 26rpx;
      }
      .header_r{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 150rpx;
        .state{
          font-size:28rpx;
          color:#333
        }
        .express{
          font-size:26rpx;
          color:#999;
        }
        .tel{
          font-size:26rpx;
          color: #999;
          span{
            color: #999;
          }
        }
      }
    }
    .express_info{
      width: 100%;
      height: 122rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      margin-bottom: 20rpx;
      .express_l{
        display: flex;
        align-items: center;
        height: 70rpx;
        image{
          width: 70rpx;
          height: 70rpx;
          margin-right: 10rpx;
        }
        .express_c{
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 70rpx;
          .express_c_t{
            font-size:24rpx;
            color:#999;
          }
          .express_c_b{
            font-size:26rpx;;
            color: #333;
          }
        }
      }
      .express_r{
        width: 40rpx;
        height: 40rpx;
      }
    }
    .content{
      width: 100%;
      background: #fff;
      padding: 46rpx 30rpx 0 58rpx;
      box-sizing: border-box;
      .logistics_list{
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: 140rpx;
        justify-content: flex-end;
        // margin-bottom: 30rpx;
          .list_time{
              width: 82rpx;
              display: flex;
              flex-direction: column;
              color: #999;
              .list_time_t{
                font-size:28px;
                margin-bottom: 13rpx;
                white-space: nowrap;
              }
              .list_time_b{
                font-size:18px;
              }
            }
            .box{
              display: flex;
              justify-content: space-between;
              width: 535rpx;
              margin-left: 31rpx;
              .list_c{
                  width: 30rpx;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-between;
                  padding-top: 10rpx;
                  box-sizing: border-box;
                  image{
                    width: 30rpx;
                    height: 30rpx;
                  }
                  .lang{
                    width: 2rpx;
                    height: 122rpx;
                    background: #efefef;
                  }
                  .circal{
                    width: 22rpx;
                    height: 22rpx;
                    background:rgba(205,205,205,1);
                    border-radius:50%;
                  }
                }
            
            .list_r{
              width: 505rpx;
              display: flex;
              flex-direction: column;
              color: #999;
              margin-left: 31rpx;
              .state{
                font-size:28rpx;
                margin-bottom: 27rpx;
              }
              .address{
                font-size: 24rpx;
                span{
                  color: #FF3D4FFF;
                }
              }
            }

            }
            
      }
    }
  }
</style>
